{% extends 'base.html' %}

{% block content %}
    
    <h1>{{ diagnostic_test.test }}</h1>
	<table id="sort" class="table table-bordered table-striped table-condensed table-hover">
		<thead>
			<tr>
			    <th>Questions</th>
			    <th>Question_order</th>
			    <th style="text-align: center;">Remove question</th>
			    <th style="text-align: center;">Edit question</th>
			</tr>
		</thead>
		<tbody>
	    	{% for question in questions %}
	    		<tr>
	    			<td>{{ question.question }}</td>
	    			<td>{{ question.question_order }}</td>
	    			<td style="text-align: center;"><a href="/test/remove/{{ question.id }}"><i class="icon-remove"></i></a></td>
	    			<td style="text-align: center;"><a href="."><i class="icon-edit"></i></a></td>
	    		</tr>
		    {% endfor %}
		</tbody>
	</table>
	<div class="pull-right">
		<button id="submit" class="btn btn-primary">Add more questions</button>
		<button id="submit" class="btn">Rearrange questions</button>
	</div>
{% endblock %}
{% block scripts %}
	<script>
		$(function() {
			$( "#sort tbody" ).sortable();
			$( "#sort tbody" ).disableSelection();
		});
	</script>

{% endblock %}